import QtQuick
import QtQuick.Controls

Item {
    id: root
    property int vt: 340
    property int peep: 10
    property int oxy: 21

    Column {
        anchors.fill: parent
        spacing: 22
        Image {
            width: 232
            height: 86
            source: "qrc:///images/current-mode.png"
            anchors.left: parent.left; anchors.leftMargin: 25
        }
        Item {
            width: 270
            height: 90
            Row {
                anchors.fill: parent
                anchors.topMargin: 5

                Button {
                    id: btn_vtDec
                    width: 70
                    height: parent.height
                    contentItem: Image {
                        source: btn_vtDec.pressed ?
                                    ("qrc:///images/btn-remove-down.png") :
                                    ("qrc:///images/btn-remove-normal.png")
                    }
                    onClicked: root.vt--;
                    background: Rectangle {
                        opacity: 0
                    }
                }
                Item {
                    id: vt
                    width: 145
                    height: parent.height

                    Text {
                        text: root.vt.toString()
                        color: "#5ECEBD"
                        font.pixelSize: 50
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: parent.top;anchors.topMargin: 14
                    }
                    Image {
                        anchors.horizontalCenter: parent.horizontalCenter
                        source: "qrc:///images/Vt-title.png"
                    }
                }
                Button {
                    id: btn_vtInc
                    width: 70
                    height: parent.height
                    contentItem: Image {
                        source: btn_vtInc.pressed ?
                                    ("qrc:///images/btn-add-down.png") :
                                    ("qrc:///images/btn-add-normal.png")
                    }
                    onClicked: root.vt++;
                    background: Rectangle {
                        opacity: 0
                    }
                }
            }
        }
        Item {
            width: 270
            height: 90
            Row {
                anchors.fill: parent
                anchors.topMargin: 5

                Button {
                    id: btn_peepDec
                    width: 70
                    height: parent.height
                    contentItem: Image {
                        source: btn_peepDec.pressed ?
                                    ("qrc:///images/btn-remove-down.png") :
                                    ("qrc:///images/btn-remove-normal.png")
                    }
                    onClicked: root.peep--;
                    background: Rectangle {
                        opacity: 0
                    }
                }
                Item {
                    id: peep
                    width: 145
                    height: parent.height

                    Text {
                        text: root.peep.toString()
                        color: "#5ECEBD"
                        font.pixelSize: 50
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: parent.top;anchors.topMargin: 14
                    }
                    Image {
                        anchors.horizontalCenter: parent.horizontalCenter
                        source: "qrc:///images/peepcpap-title.png"
                    }
                }
                Button {
                    id: btn_peepInc
                    width: 70
                    height: parent.height
                    contentItem: Image {
                        source: btn_peepInc.pressed ?
                                    ("qrc:///images/btn-add-down.png") :
                                    ("qrc:///images/btn-add-normal.png")
                    }
                    onClicked: root.peep++;
                    background: Rectangle {
                        opacity: 0
                    }
                }
            }
        }
        Item {
            width: 270
            height: 90
            Row {
                anchors.fill: parent
                anchors.topMargin: 5

                Button {
                    id: btn_oxyDec
                    width: 70
                    height: parent.height
                    contentItem: Image {
                        source: btn_oxyDec.pressed ?
                                    ("qrc:///images/btn-remove-down.png") :
                                    ("qrc:///images/btn-remove-normal.png")
                    }
                    onClicked: root.oxy--;
                    background: Rectangle {
                        opacity: 0
                    }
                }
                Item {
                    id: oxy
                    width: 145
                    height: parent.height

                    Text {
                        text: root.oxy.toString()
                        color: "#5ECEBD"
                        font.pixelSize: 50
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.top: parent.top;anchors.topMargin: 14
                    }
                    Image {
                        anchors.horizontalCenter: parent.horizontalCenter
                        source: "qrc:///images/Oxygen-title.png"
                    }
                }
                Button {
                    id: btn_oxyInc
                    width: 70
                    height: parent.height
                    contentItem: Image {
                        source: btn_oxyInc.pressed ?
                                    ("qrc:///images/btn-add-down.png") :
                                    ("qrc:///images/btn-add-normal.png")
                    }
                    onClicked: root.oxy++;
                    background: Rectangle {
                        opacity: 0
                    }
                }
            }
        }
    }
}
